<!--  -->

<template>
  <div class="Login">
    <div class="box-center">
      <div class="top-text">
        <h3>欢迎使用</h3>
      </div>
      <el-form
        class="demo-ruleForm"
        :model="from"
        :rules="rules"
        ref="LoginFrom"
        label-position="top"
        :hide-required-asterisk="true"
      >
        <el-form-item prop="username" label="用户名称">
          <el-input
            type="text"
            placeholder="请输入用户名"
            v-model="from.username"
            clearable
            prefix-icon="el-icon-user-solid"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item prop="password" label="用户密码">
          <el-input
            type="password"
            placeholder="请输入密码"
            @keyup.enter.native="Login"
            v-model="from.password"
            clearable
            show-password
            prefix-icon="el-icon-lock"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item prop="verifyCode" label="验证码">
          <el-row>
            <el-col :span="16">
              <el-input
                type="text"
                placeholder="验证码--点击图片刷新"
                v-model="from.verifyCode"
                clearable
                prefix-icon="el-icon-orange"
                autocomplete="off"
              ></el-input>
            </el-col>
            <el-col :span="8" class="">
              <div @click="initCode" style="height: 40px; margin-left: 15px">
                <img
                  v-if="!imgCode"
                  style="width: 100%; height: 100%; cursor: pointer"
                  src="../../assets/img/login/404.jpg"
                  alt=""
                />
                <img
                  v-else
                  style="width: 100%; height: 100%; cursor: pointer"
                  :src="imgCode"
                />
              </div>
            </el-col>
          </el-row>
        </el-form-item>
        <div class="box-bom">
          <el-button size="medium" type="primary" @click="Login"
            >登 录</el-button
          >
        </div>
      </el-form>
    </div>
  </div>
</template>
<script>
import md5 from "js-md5";
import { myStorage } from "../../utils/localStorage/index";
import { setMessageCallback, publishMsg, removeMessageCallback } from "@/mqtt";
let Base64 = require("js-base64").Base64;
export default {
  inject: ["reload"],
  name: "Login",
  data() {
    return {
      from: {
        username: "",
        password: "",
        verifyCode: "",
      },
      imgCode: "",
      requestCodeSuccess: false,
      // 表单验证
      rules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
        ],
        password: [
          { required: true, message: "请输入用户密码", trigger: "blur" },
          {
            min: 1,
            // max: 11,
            message: "密码不能为空",
            trigger: "blur",
          },
        ],
        verifyCode: [
          { required: true, message: "请输入验证码", trigger: "blur" },
          {
            min: 4,
            message: "长度最小4个字符",
            trigger: "blur",
          },
        ],
      },
      // clientId:myStorage.get('clientId'),
    };
  },
  beforeMount() {}, //生命周期 - 挂载之前
  mounted() {
    // window.location.reload()
    setTimeout(() => {
      //console.log("第一步");
      setMessageCallback(this.onMessage);
      //console.log("第二步");
      this.initCode();
    }, 200);
  },
  created() {},
  destroyed() {
    removeMessageCallback(this.onMessage);
  },
  methods: {
    reset() {
      this.$refs.LoginFrom.resetFields();
    },
    Login() {
      this.$refs.LoginFrom.validate(async (vail) => {
        if (!vail) {
          return false;
        }
        //将密码进行三次加密
        for (let i = 0; i < 3; i++) {
          this.from.password = md5(this.from.password);
        }
        //将最终密码解密
        this.from.password = Base64.encode(this.from.password);
        let msg = {
          webMsgType: 1003,
          funCode: 0,
        };
        let newMsg = { ...msg, ...this.from };
        //console.log(newMsg);
        publishMsg(newMsg);
      });
    },

    onMessage(topic, msg) {
      switch (msg.webMsgType) {
        case 1002:
          switch (msg.retCode) {
            case 0:
              this.imgCode = msg.data.capthaImg;
              break;
            case 1:
              this.$router.push("/Home");
              this.$message.info(msg.retMsg);
              break;
            default:
              break;
          }
          break;
        case 1003:
          switch (msg.funCode) {
            case 0:
              if (msg.funCode != 0 || !msg.data) {
                let msgErr = msg.retCode;
                switch (msgErr) {
                  case 1:
                    this.reset();
                    this.$message.error(msg.retMsg);
                    break;
                  case 2:
                    this.from.verifyCode = "";
                    this.$message.error(msg.retMsg);
                    this.initCode();
                    break;
                  case 3:
                    this.from.password = "";
                    this.$message.error(msg.retMsg);
                    break;
                  default:
                    this.reset();
                    break;
                }
              } else {
                this.getParamSystem();
                myStorage.set("UserName", msg.data.nickname);
                myStorage.set("limits", msg.data.limits);
                let permissionList = [];
                if (msg.data.limits == 0) {
                  permissionList.push(
                    "add",
                    "del",
                    "edit",
                    "export",
                    "import",
                    "view",
                    "datacfg",
                    "editview"
                  );
                  this.$router.push("/Home");
                  this.$message.success("登陆成功！");
                } else {
                  permissionList.push("edit", "export", "import");
                  // this.$router.push("/viewer");
                  this.$router.push({
                    name: "Dashboard",
                    query: { id: 1 },
                  });
                  this.$message.success("登陆成功！");
                }
                myStorage.set("has", permissionList);
                break;
              }
          }
          break;
        default:
          break;
      }
    },
    initCode() {
      // 判断浏览器是否上网
      if (navigator.onLine) {
        this.requestCodeSuccess = false;
        let sendMsg = {
          webMsgType: 1002,
          funCode: 0,
        };
        publishMsg(sendMsg);
      } else {
        this.requestCodeSuccess = true;
      }
    },
    getParamSystem() {
      publishMsg({
        webMsgType: 1018,
        funCode: 0,
      });
    },
  },
};
</script>
<style scoped lang="scss">
.Login {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  justify-content: space-between;
  background-image: url("@/assets/img/login/bj.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center bottom;
  .box-center {
    background-color: #fff;
    width: 400px;
    // height: 430px;
    margin: 0px auto;
    border-radius: 10px;
    position: fixed;
    top: 50%;
    left: 70%;
    transform: translateX(-50%) translateY(-50%);
    box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.2);
    .demo-ruleForm {
      padding: 0px 50px 30px 50px;
    }
    .top-text {
      flex: 1;
      h3 {
        font-size: 26px;
        text-align: center;
      }
    }
  }

  .box-bom {
    // height: 40px;
    .el-button {
      width: 100%;
      height: 40px;
    }
  }
}
::v-deep .el-form-item__label {
  padding: 0px;
}
::v-deep .el-form-item__content {
  line-height: 40px;
}
::v-deep .el-input__inner {
  background-color: #f7f8fc;
  height: 40px;
  line-height: 40px;
}
::v-deep .el-input__icon {
  line-height: 0px;
}
::v-deep .el-col {
  height: 40px;
}
</style>
